<template>
  <div class="keyLine">
    <div class="block">
      <el-timeline>
        <el-timeline-item icon="el-icon-circle-check" v-for="(item,index) in tableData" :key="index" :type="item.STATUSNAME=='正常完成'?'success':'info'" :timestamp="item.NODE_NAME" placement="top">
          <div class="year">
            <el-button :type="item.STATUSNAME=='正常完成'?'success':'info'" size="mini">{{ item.STATUSNAME=='正常完成'?'已处理':'未处理' }}</el-button>
          </div>
          <el-card style="font-size: 14px;">
            <p>审核意见：{{item.OPINION}}</p>
            <p>进入时间：{{item.TASK_BEGINTIME}}</p>
            <p>结束时间：{{item.TASK_ENDTIME}}</p>
            <p>操作人：{{item.ST_NAME}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script>
import { QuerySignCallback } from '../../utils/api'
export default {
  data () {
    return {
      tableData: [
      ]
    }
  },
  mounted () {
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        "title": "流程详情"
      }).then(res => {
      }).catch(err => {
      })
    }
  },
  methods: {
    getData: async function (data) {
      let params = {
        "dataguid": "b2c338f4-d2b8-48fe-a1bf-df511cbf9c77",
        searchObject: JSON.stringify([{ "field": "PROC_GUID", "value": data, "link": "OR", "operator": "=" }]),
        token: window.localStorage.getItem('token')
      }
       let params1 = {
	      "accessCode": "688bd3883572440a859dfd8ba9194e7b",
	      "cityCode": window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '',
	      "params": params
      }
      const res = await QuerySignCallback(params1)
      this.tableData = eval("("+res.data.data+")").Data
    },
    onClickLeft () {
      this.$router.back(-1)
    }
  },
  mounted () {
    this.getData(this.$route.query.PROC_GUID)
  }
}
</script>
<style lang="scss" scoped>
.keyLine {
  height: 100vh;
  background: #fff;
  font-size: 14px;
  overflow: auto;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  padding: 10px;
  .title {
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .block {
    // height: calc(100vh - 50px);
    overflow: auto;
    padding: 4px;
    .year{
       position: absolute;
       right:4px;
       top:-2px
    }
  }
}
</style>

<style>
.el-timeline-item__timestamp{
  color: #208ffb;
  font-size: 16px;
  font-weight: 580;
}

</style>
